<template>
    <div class="shareList">
        <div class="banner">
            <div class="header"></div>
            <div class="user" v-for="(item,index) in shareList" @click="onDeleteShare(item)">
                <div class="left">
                    <img class="img" alt="right" :src="item.headImg">
                    <div class="name">{{ item.nickName }}</div>
                </div>
                <div class="right">
                    <div>分享时间</div>
                    <div>{{ format(item.createTime)}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Dialog, Toast, Loading, Popup} from 'vant';
    import {post} from "../../js/utils";
    import {parse2001} from "../../js/parseData";
    import moment from 'moment';
    import {mapMutations, mapState} from "vuex";

    export default {
        name: 'ShareList',
        computed: {
            ...mapState(["userId"])
        },
        components: {},
        data () {
            return {
                devId: this.$route.query.devId,
                shareList: [],
                items: {},
            }
        },
        async created () {
            this.getSharelist()
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            getSharelist: async function () {
                await post("/user/ListShareDevice", {
                    devId: this.devId
                }).then(
                    res => {
                        this.shareList = res.devList
                    })
            },
            onDeleteShare: function (item) {
                Dialog.confirm({
                    title: '删除该分享',
                    message: '删除后将重置该设备的相关信息'
                }).then(() => {
                    let _this = this;
                    post("/user/DeleteWxShareDevice", {
                        shareId: item.shareId,
                        devId: _this.devId,
                    }).then(
                        res => {
                            Toast.success('删除分享成功');
                            this.getSharelist()
                        }
                    ).catch((err) => {
                        Toast.fail(err);
                    })

                })
            },
            format: function (data){
                return moment(data).format('YYYY-MM-DD HH:mm')
            }
        }
    }
</script>

<style scoped>
    .shareList > .banner {
        width: 100vw;
        min-height: 50vh;
        background: url(../../assets/home_922.png) no-repeat center top;
        background-size: 100% 100%;
    }

    .shareList > .banner > .header {
        min-height: 2vh;
    }

    .shareList > .banner > .user {
        width: 90vw;
        min-height: 10vh;
        margin: 2vh auto;
        background: url(../../assets/userList_01.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
    }

    .shareList > .banner > .user > .left {
        margin-left: 20px;
        height: 50px;
        align-self: center;
        display: flex;
        justify-content: space-between;
    }

    .shareList > .banner > .user > .left > .img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .shareList > .banner > .user > .left > .name {
        align-self: center;
        font-size: 18px;
    }

    .shareList > .banner > .user > .right {
        margin-right: 20px;
        align-self: center;
        font-size: 12px;
    }

    .shareList > .plus {
        background: url(../../assets/plus.png) no-repeat center center;
        background-size: 100% 100%;
        position: fixed;
        width: 100px;
        height: 100px;
        bottom: 20px;
        z-index: 999;
        left: 38%;
    }
</style>
